<template>
  <div>
    <!-- vant 输入框Search -->
    <van-search
      v-model.trim="value"
      shape="round"
      placeholder="请输入搜索关键词"
      @clear="clearFn"
      @input="inputFn"
    />
    <!-- 搜索下容器 -->
    <!-- !服务器没有响应回来数据undefined没有长度 -->
    <div v-if="resArr.length === 0" class="search_wrap">
      <!-- 标题 -->
      <p class="hot_title">热门搜索</p>
      <!-- 热搜关键词容器 -->
      <div class="hot_name_wrap">
        <!-- 每个搜索关键词 -->
        <span
          class="hot_item"
          v-for="(item, index) in hotArr"
          :key="index"
          @click="clickFn(item.first)"
          >{{ item.first }}</span
        >
      </div>
    </div>
    <!-- 搜索结果 -->
    <div v-else class="search_wrap">
      <!-- 标题 -->
      <p class="hot_title">最佳匹配</p>

      <!-- list组件 实现滚动到底部加载更多 -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <!-- key  id -->
        <!-- <van-cell
          v-for="item in resArr"
          :key="item.id"
          :title="item.name"
          :label="item.ar[0].name + ' - ' + item.name"
          center
        >
          <template #right-icon>
            <van-icon name="play-circle-o" size="0.6rem" />
          </template>
        </van-cell> -->
        <!-- 使用封装的SongItem组件 -->
        <SongItem
          v-for="item in resArr"
          :key="item.id"
          :title="item.name"
          :label="item.ar[0].name"
          :id="item.id"
        ></SongItem>
      </van-list>
    </div>
  </div>
</template>
<script>
import SongItem from "@/components/SongItem.vue";
import { hotSearchchList, getSearchRes } from "@/api";
export default {
  components: {
    SongItem,
  },
  data() {
    return {
      value: "", //输入框
      hotArr: [], //热搜关键字数据
      resArr: [], //搜索结果的数据
      loading: false, //表示是否正在加载更多数据，默认false，表示未正在加载
      finished: false, //表示是否所有数据都加载结束了，默认false，表示没有结束
      page: 1, //页数 默认为1，默认展示第一项
      timer: null, //计时器
    };
  },
  async created() {
    const { data: res } = await hotSearchchList();
    console.log(res);
    this.hotArr = res.result.hots;
  },
  methods: {
    async inputFn() {
      console.log(this.value);
      if (this.timer) clearTimeout(this.timer);
      this.timer = setTimeout(async () => {
        // todo 输入的时候 来发送请求获取搜索的结果
        // !非空判断，没有内容不用发送请求获取搜索结果
        if (this.value === "") return;

        // 每次输入时，从第一页获取搜索结果，避免在上一次搜索时页码不是第一页
        this.page = 1;
        this.finished = false;

        const res = await this.getResFn();
        console.log(res);

        // 处理没有songs数据的情况
        if (res.result.songs === undefined) {
          this.resArr = [];
          return;
        }

        // 搜索的时候将搜索最新的结果赋值给resArr
        this.resArr = res.result.songs;
      }, 900);
    },
    //数据加载事件
    async onLoad() {
      console.log("触发load事件");
      // 发送请求，获取搜索结果 this.getResFn();
      // !滚动的时候page页面加1 表示获取下一页数据
      this.page++;
      const res = await this.getResFn(); //this.getResFn()是个Promise对象
      console.log(res);

      // ! 处理没有songs数据的情况,表示所有数据都加载完毕了,处理finished
      if (res.result.songs === undefined) {
        // this.resArr = [];
        // 没数据
        this.finished = true;
        // 表示请求也完成了
        this.loading = false;
        return;
      }

      // !吧获取的数据添加到resArr数据中
      // this.resArr=res.result.songs//报错会覆盖原来数据
      // push不行，相当于拿到的是个数组相当于数组套数组，可以用push（...[]）
      //展开运算符 实现拼接数据的效果
      this.resArr = [...this.resArr, ...res.result.songs];

      // !数据加载完成之后，一定要加loading设置为false（表示本次加载完成了）
      this.loading = false;
    },

    // todo  清除按钮
    clearFn() {
      // 清空数组 最佳匹配会被隐藏
      this.resArr = [];
    },
    // 点击热搜关键词
    async clickFn(val) {
      this.value = val; //修改value
      // 每次输入时，从第一页获取搜索结果，避免在上一次搜索时页码不是第一页
      this.page = 1;
      this.finished = false;

      // 发送请求，获取搜索结果
      // const { data: res } = await getSearchRes({
      //   keywords: this.value,
      // });
      // console.log(res);
      const res = await this.getResFn(); //this.getResFn()是个Promise对象
      console.log(res);
      this.resArr = res.result.songs;
    },

    async getResFn() {
      // todo 封装函数用来获取搜索结果
      // 发送请求，获取搜索结果
      const { data: res } = await getSearchRes({
        keywords: this.value,
        limit: 50,
        offset: (this.page - 1) * 50,
      });
      return res;
    },
  },
};
</script>

<style scoped>
/* 搜索容器的样式 */
.search_wrap {
  padding: 0.266667rem;
}

/*热门搜索文字标题样式 */
.hot_title {
  font-size: 0.32rem;
  color: #666;
}

/* 热搜词_容器 */
.hot_name_wrap {
  margin: 0.266667rem 0;
}

/* 热搜词_样式 */
.hot_item {
  display: inline-block;
  height: 0.853333rem;
  margin-right: 0.213333rem;
  margin-bottom: 0.213333rem;
  padding: 0 0.373333rem;
  font-size: 0.373333rem;
  line-height: 0.853333rem;
  color: #333;
  border-color: #d3d4da;
  border-radius: 0.853333rem;
  border: 1px solid #d3d4da;
}
</style>
